﻿@page
@{
    ViewBag.Title = "Basic Controls";
}
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h1>Basic Controls</h1>

        <h2>Inputs</h2>
        <div class="form-group">
            <label for="first-name">First Name</label>
            <input id="first-name" type="text" class="form-control x-first-name" />
        </div>
        <div class="form-group">
            <label for="lastName">Last Name*</label>
            <input id="lastName" type="text" class="form-control" />
        </div>
        <div class="form-group">
            <label for="MiddleName">Middle name:</label>
            <input id="MiddleName" type="text" class="form-control" />
        </div>
        <div class="form-group">
            <label for="readonly-field">Readonly Field</label>
            <input id="readonly-field" type="text" class="form-control" readonly value="readme" />
        </div>
        <div class="form-group">
            <label for="disabled-field">Disabled Field</label>
            <input id="disabled-field" type="text" class="form-control" disabled value="readme" />
        </div>
        <div class="form-group">
            <label for="age">Age</label>
            <input id="age" type="number" class="form-control" min="0" max="150" step="1" />
        </div>

        <h2>Buttons/Links</h2>
        <div>
            <button class="btn btn-default">
                Raw Button
            </button>
            <input type="button" value="Input Button" class="btn btn-default" />
            <a title="Link Button" class="btn btn-default">Link Button</a>
            <div class="btn btn-default">
                Div Button
            </div>
            <button class="btn btn-default" disabled>
                Disabled Button
            </button>
        </div>
        <br />
        <div>
            <button class="btn btn-default" onclick="location.href='input';">
                Go to Button
            </button>
            <input type="button" value="Go to Input Button" class="btn btn-default" onclick="location.href='input';" />
            <a title="Link Button" class="btn btn-default" href="input">Go to Link</a>
            <div class="btn btn-default" onclick="location.href='input';">
                Go to Div Button
            </div>
        </div>

        <h2>Selects</h2>
        <div class="form-group">
            <label for="gender">Gender</label>
            <select id="gender" type="text" class="form-control">
                <option value="" selected>--select--</option>
                <option value="1">Male</option>
                <option value="0">Female</option>
            </select>
        </div>

        <h2>Option Controls</h2>

        <div class="form-group x-checkbox-container">
            <fieldset>
                <legend>Checkbox Options</legend>
                <label class="checkbox-inline">
                    <input type="checkbox" name="checkbox-options" value="OptionA" />Option A
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="checkbox-options" value="OptionB" />Option B
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="checkbox-options" value="OptionC" />Option C
                </label>
            </fieldset>
        </div>
    </div>
</div>
